import http from '../../http/http';
import { useEffect, useState } from 'react';
import { View, Image, Input, ScrollView } from "@tarojs/components";
import { AtForm } from 'taro-ui';
import { AtModal, AtModalContent, AtModalAction } from "taro-ui"
import Taro from '@tarojs/taro'
import './confirmOrder.less'
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/modal.scss";
function ConfirmOrder() {
    //地址
    const address=()=>{
        console.log(1);
    }
    //弹框
    //弹框状态
    const [state, setState] = useState(false)
    const goods = (v) => {
        console.log(v.id);
        setState(true)
    }
    const close = () => {
        setState(false)
    }
    const yes = () => {
        setState(false)
        Taro.navigateTo({
            url: '/pages/goodsDetail/goodsDetail'
        })
    }
    const [list, setLiset] = useState([
        {
            id: 1,
            val: '男鞋夏季2019新款网红涂鸦潮鞋高邦帆布板鞋韩版潮流个性高帮布鞋',
            guige: 'EU 36',
            yanse: '蓝色',
            src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp15.qhimg.com%2Fbdr%2F740__%2Fd%2F_open360%2Fdongman1031%2F11.jpg&refer=http%3A%2F%2Fp15.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631346022&t=5384595214a601f7d1b0e74030f5109c'
        },
        {
            id: 2,
            val: '男鞋夏季2019新款网红涂鸦潮鞋高邦帆布板鞋韩版潮流个性高帮布鞋',
            guige: 'EU 38',
            yanse: '红色',
            src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp15.qhimg.com%2Fbdr%2F740__%2Fd%2F_open360%2Fdongman1031%2F11.jpg&refer=http%3A%2F%2Fp15.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631346022&t=5384595214a601f7d1b0e74030f5109c'
        },
        {
            id: 3,
            val: '男鞋夏季2019新款网红涂鸦潮鞋高邦帆布板鞋韩版潮流个性高帮布鞋',
            guige: 'EU 39',
            yanse: '蓝色',
            src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp15.qhimg.com%2Fbdr%2F740__%2Fd%2F_open360%2Fdongman1031%2F11.jpg&refer=http%3A%2F%2Fp15.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631346022&t=5384595214a601f7d1b0e74030f5109c'
        },
    ])

    const renderFn = () => {
        if (list.length == 1) {
            {/* 单商品 */ }
           return( <View className='d-f p-2 xian y-c mt-1'>
                <View>
                    <View className='at-icon at-icon-shopping-bag-2 tubiao'></View>
                </View>
                {list.map((v, i) => (
                    <View className='d-f y-c' key={v.id}>
                        <View>
                            <Image style='width: 60px;height:60px' src={v.src} onClick={()=>goods(v)} />
                        </View>
                        <View>
                            <View className='p-1'>
                                <AtForm>
                                    <Input className='inp'
                                        disabled
                                        border={false}
                                        type='text'
                                        value={v.val}
                                    />
                                </AtForm>
                            </View>
                            <View className='d-f p-1 x-s-b y-c'>
                                <View className='d-f y-c'>
                                    <View>规格:</View>
                                    <View className='guige'>{v.guige}</View>
                                    <View className='guige'>{v.yanse}</View>
                                </View>
                                <View className='d-f'>
                                    <View>数量:</View>
                                    <View>1</View>
                                </View>
                            </View>
                        </View>
                    </View>
                ))}
            </View>
            )
        } else {
            {/* 多商品 */ }
            return(<View className='d-f p-2 xian y-c mt-1'>
                <View>
                    <View className='at-icon at-icon-shopping-bag-2 tubiao'></View>
                </View>
                <View>
                    <ScrollView
                        className='scrollview d-f sView my-2'
                        scrollX={true}
                        enableFlex={true}
                    >
                        {list.map((v, i) => (
                            <Image key={v.id} style='width: 60px;height:60px' src={v.src} onClick={() => goods(v)} />
                        ))}
                    </ScrollView>
                </View>
            </View> )
        }
    }
    return (
        <View className='p-5 box'>
            <View className='biaoti'>确认订单</View>
            {/* 地址 */}
            <View className='d-f p-2 xian y-c mt-1'>
                <View>
                    <View className='at-icon at-icon-home tubiao'></View>
                </View>
                <View>
                    <View>
                        <AtForm>
                            <Input className='inp'
                                disabled
                                border={false}
                                type='text'
                                placeholder='请添加地址'
                                value=''
                                onClick={address}
                            />
                        </AtForm>
                    </View>
                    <View className='d-f'>
                        <View>潘晨</View>
                        <View>15002923211</View>
                    </View>
                </View>
            </View>
            {renderFn()}
            {/* 费用 */}
            <View className='d-f p-2 xian y-c mt-1'>
                <View>
                    <View className='at-icon at-icon-money tubiao'></View>
                </View>
                <View>
                    <View className='d-f'>
                        <View>实付金额</View>
                        <View>￥9.99</View>
                    </View>
                    <View className='d-f'>
                        <View>快递费用</View>
                        <View>0</View>
                        <View>元</View>
                    </View>
                </View>
            </View>
            {/* 支付按钮 */}
            <View className='buy'>立即支付</View>

            {/* 弹框 */}
            <AtModal isOpened={state} onClose={close}>
                <AtModalContent className='giveUp d-f x-s-a y-c'>
                    <View>是否放弃订单!</View>
                </AtModalContent>
                <AtModalAction className='d-f y-c x-s-a my-4'>
                    <View className='yes' onClick={yes}>确定</View>
                </AtModalAction>
            </AtModal>
        </View>
    )
}
export default ConfirmOrder;
